<template>
  <div class="role-list employment-detail">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>离校未就业高校毕业生实名登记情况</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>

    <!-- 表格主体 -->
    <div class="role-list-content" style="position:relative;">
      <!-- 头部筛选 -->
      <div class="role-list-search" style="background: linear-gradient(90deg, #23313c 0%, #1e2f43 50%, #1f304e 100%)">
        <div class="search-content">
          <input class="dap-input" type="text" v-model="searchName" maxlength="30" placeholder="搜索姓名/身份证号/手机号/院校">
          <div class="top-select-item quxiang-select">
            <single-list-filter-without-cb ref="refXueLi"
                                           @confirmSingleSelect="xueLiFun"></single-list-filter-without-cb>
          </div>
          <div class="top-select-item service-type">
            <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="checkSelectFun" defaultText="就业服务"
                                 :filter="filter" type="service" ref="refDoubleCheckFilter"></double-check-filter>
          </div>
          <div class="top-select-item">
            <single-list-filter-without-cb ref="refJiuYeMonth"
                                           @confirmSingleSelect="jiuYeMonthFun"></single-list-filter-without-cb>
          </div>
          <div class="search-btn">
            <span class="dap-button" @click="searchItem">搜索</span>
          </div>
          <div class="search-btn">
            <span style="margin-left:18px;" class="dap-close-button" :class="canReset?'canReset':''"
                  @click="reset">重置</span>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="role-list-table">
        <div class="table-title"></div>
        <div class="table-content">
          <el-table
            :data="tableData"
            v-loading="loadingShow"
            element-loading-text="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            height="10">
            <el-table-column
              prop="number"
              width="60px"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="fullName"
              label="姓名"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="graduateSchool"
              label="毕业院校"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="pEducation"
              label="学历"
              align="center">
            </el-table-column>
            <el-table-column
              prop="smlMajorName"
              label="专业"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="idNumber"
              label="身份证号"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="contactNumber"
              label="联系电话"
              align="center">
            </el-table-column>
            <el-table-column
              prop="shengYuanDi"
              label="生源地"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jobCompany"
              label="就业单位或项目"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jieShouFuWuLeiXing"
              label="就业服务"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jobTime"
              label="就业月份"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jobSalary"
              label="薪资（元）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="countOfPerson"
              label="操作"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="seeInfo(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <dap-page :pageTotal="total" v-on:pageSizeChange="pageSizeChange" v-on:pageCurrentChange="pageChange"
                :currentPage="currentPage"></dap-page>
      <!-- 用户信息弹窗 -->
      <dap-popover ref="refUserInfoPopover" :titleText="'毕业生个人信息'" :hideBtn="true">
        <ul class="user-info-wrapper">
          <li>
            <span>姓名：</span>
            <span>{{popInfo.fullName}}</span>
          </li>
          <li>
            <span>性别：</span>
            <span>{{popInfo.pSex==1?"男":"女"}}</span>
          </li>
          <li>
            <span>出生年月：</span>
            <span>{{popInfo.pBirthday}}</span>
          </li>
          <li>
            <span>身份证号：</span>
            <span>{{popInfo.idNumber}}</span>
          </li>
          <li>
            <span>民族：</span>
            <span>{{popInfo.nameFamily}}</span>
          </li>
          <li>
            <span>联系方式：</span>
            <span>{{popInfo.contactNumber}}</span>
          </li>
          <li>
            <span>家庭住址：</span>
            <span>{{popInfo.homeAddress}}</span>
          </li>
          <li>
            <span>毕业院校：</span>
            <span>{{popInfo.graduateSchool}}</span>
          </li>
          <li>
            <span>学历：</span>
            <span>{{popInfo.pEducation}}</span>
          </li>
          <li>
            <span>专业：</span>
            <span>{{popInfo.smlMajorName}}</span>
          </li>
          <li>
            <span>备注：</span>
            <span>{{popInfo.remarks}}</span>
          </li>
          <li>
          <li>
            <span>生源地：</span>
            <span>{{popInfo.shengYuanDi}}</span>
          </li>
          <li>
            <span>归属地：</span>
            <span>{{popInfo.guiShuDi}}</span>
          </li>
          <li>
            <span>数据来源：</span>
            <span>{{popInfo.dataSource}}</span>
          </li>
          <li>
            <span>困难状况：</span>
            <span>{{popInfo.difficultSituation}}</span>
          </li>
          <li>
            <span>就业去向：</span>
            <span>{{popInfo.jobGoWhere}}</span>
          </li>
          <li>
            <span>单位名称：</span>
            <span>{{popInfo.jobCompany}}</span>
          </li>
          <li>
            <span>就业时间：</span>
            <span>{{popInfo.jobTime}}</span>
          </li>
          <li>
            <span>毕业年度：</span>
            <span>{{popInfo.graduationYear}}</span>
          </li>
          <li>
            <span>薪资：</span>
            <span>{{popInfo.jobSalary}}</span>
          </li>
          <li>
            <span>档案号：</span>
            <span>{{popInfo.archivesNumber}}</span>
          </li>
          <li>
            <span>是否存放档案：</span>
            <span>{{popInfo.depositArchivesFlag}}</span>
          </li>
          <li>
            <span>就业服务需求：</span>
            <span>{{popInfo.jiuYeFuWuXuQiu}}</span>
          </li>
          <li>
            <span>就业服务类型：</span>
            <span>{{popInfo.jieShouFuWuLeiXing}}</span>
          </li>
          <li>
            <span>推荐结果：</span>
            <span>{{popInfo.tuiJianJieGuo}}</span>
          </li>
          <li>
            <span>推荐次数：</span>
            <span>{{popInfo.tuiJianCiShu}}</span>
          </li>
        </ul>
      </dap-popover>

    </div>
  </div>
</template>
<script>
  import { getDepartmentList, getSearchItems, baseApiF, graduateJob } from "../../../api/api";
  import { svgPath, quitFullScreen } from "../../../assets/js/utils";
  import { filterLogText } from "../../../api/authority";
  import dapPage from "../../view/dap-page.vue";
  import dapPopover from "../../view/dap-popover.vue";

  // 下拉框
  import SingleListFilterWithoutCb from "../../last/filter/single-list-filter-without-checkbox";
  import DoubleCheckFilter from "../../last/filter/double-check-filter.vue";

  export default {
    props: ["isChange", "fullScreen"],
    data() {
      return {
        canReset: true,
        svgPath: svgPath,
        canShow: true,
        searchName: "",
        tableData: [],
        totalData: [],
        currentPage: 1,
        pageSize: 20,
        total: 0,
        loadingShow: true,
        showFloating: false,
        areaTitle: "",
        hospNameTitle: "",
        medicalCategoryNameTitle: "",
        filter: null,
        propParams: {}, // 传递过来的参数

        // 头部下拉
        popInfo: "",
        xueLi: [],
        jiuYeMonth: [],
        jobTime: "",
        edu: "",
        serviceType:{service:[]},
        selectedIdArr:"",
      };
    },
    components: {
      dapPage,
      dapPopover,
      SingleListFilterWithoutCb,
      DoubleCheckFilter
    },
    watch: {
      isChange() {
        if (document.querySelector(".el-header")) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
      searchName(val) {
        this.resetBtn();
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      // 取消全屏
      closeAll() {
        quitFullScreen();
      },
      getData() {
        this.loadingShow = true;
        let data = {
          "areaCode": "",
          "edu": this.edu,
          "jobOri": "",
          "serviceType":this.selectedIdArr,
          "jobTime": this.jobTime,
          "name": this.searchName,
          "pageNum": this.currentPage,
          "pageSize": this.pageSize
        };
        graduateJob(data).then(res => {
          if (res.code == 0) {
            let data = res.data;
            data.list.map((item, index) => {
              item.number = this.currentPage * this.pageSize - this.pageSize + index + 1;
            });
            this.totalData = data.list;
            this.tableData = data.list;
            this.total = data.total;
            this.loadingShow = false;
          } else {
            this.totalData = [];
            this.tableData = [];
            this.total = 0;
            this.loadingShow = false;
          }
        }).catch(res => {
          this.totalData = [];
          this.tableData = [];
          this.total = 0;
          this.loadingShow = false;
        });
      },
      searchItem() {
        this.currentPage = 1;
        this.getData();
      },

      // 初始化数据
      initData() {
        // 初始化数据
        let data = this.$route.query;
        this.propParams = data;
        this.propParams.year = data.queryYear;
        //获取筛选数据
        getSearchItems("init/initInput")
          .then((res) => {
            if (res.code == 0) {
             // this.filter = res.data;
              this.getData();
            }
          });


        // 头部下拉
        this.xueLi.push({ selectId: "", selectName: "学历" });
        let xueLiArr = ["中等专科", "大学专科", "大学本科", "硕士研究生", "博士研究生"];
        xueLiArr.forEach((item) => {
          this.xueLi.push({ selectId: item, selectName: item });
        });
        this.$refs.refXueLi.setSingleListData(this.xueLi);

        this.jiuYeMonth.push({ selectId: "", selectName: "就业月份" });
        let yearArr = ["2017-06", "2017-07", "2017-08", "2017-09", "2017-10", "2017-11", "2017-12", "2018-01", "2018-02", "2018-03", "2018-04", "2018-05", "2018-06"];
        for (let i = 0; i < yearArr.length; i++) {
          this.jiuYeMonth.push({ selectId: yearArr[i], selectName: yearArr[i] });
        }
        ;
        this.$refs.refJiuYeMonth.setSingleListData(this.jiuYeMonth);
        // 就业服务
        let serviceTypeArr =["就业指导","就业信息服务" ,"创业服务","重点帮扶","就业见习","职业培训","人事劳动保障代理","其他扶持"];
        this.selectedIdArr=serviceTypeArr.join(",");
        this.serviceType.service.push({ selectId: "", selectName: "全部",checked:true});
        serviceTypeArr.forEach((item)=>{
          this.serviceType.service.push({ selectId: item, selectName: item,checked:true});
        })
        this.filter=this.serviceType;
      },
      goBack() {
        // sessionStorage.setItem('isPrev','1');
        this.$router.go(-1);
      },

      //重置按钮
      resetBtn() {
        if (this.searchName != "" || this.edu || this.jobTime || this.selectedIdArr.split(',').length!=8) {
          this.canReset = false;
        } else {
          this.canReset = true;
        }
      },
      reset() {
        if (this.canReset) {
          return;
        }
        this.searchName = "";
        this.edu = "";
        this.jobTime = "";
        this.$refs.refXueLi.setCurrentSelectPosition(0);
        this.$refs.refJiuYeMonth.setCurrentSelectPosition(0);
        this.$refs.refDoubleCheckFilter.reset();

        this.getData();
        this.resetBtn();

      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.getData();
      },
      pageChange(val) {
        this.currentPage = val;
        this.getData();
      },

      xueLiFun(item) {
        this.edu = item;
        this.resetBtn();
      },
      jiuYeMonthFun(item) {
        this.jobTime = item;
        this.resetBtn();
      },
      seeInfo(popInfo) {
        this.popInfo = popInfo;
        this.$refs.refUserInfoPopover.show();
      },
      // 多选
      checkSelectFun(selectedIdArr, selectedNameArr){
        this.selectedIdArr=selectedIdArr.join(",");
        this.resetBtn();
      }
    }
  };
</script>
<style scoped>
  @import '../../../assets/css/authority.css';

  .user-info-wrapper {
    min-width: 400px;
    padding: 10px 15px;
  }

  .user-info-wrapper li {
    line-height: 1.8em;
  }

  .user-info-wrapper li span:first-child {
    display: inline-block;
    width: 100px;
    text-align: right;
  }

  .canReset {
    color: #969ca5;
    border: #313d4f solid 1px;
    cursor: not-allowed;
  }

  .canReset:hover {
    color: #969ca5;
    border: #313d4f solid 1px;
    background: none;
  }

  .top-right {
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #1380e1;
    cursor: pointer;
  }

  .chart-title-floating {
    font-size: 12px;
    color: #fff;
    margin-left: 24px;
    width: 200px;
    line-height: 22px;
    padding: 10px;
    border-radius: 5px;
    background-color: #1a2940;
    border: 1px solid #313d4f;
    position: absolute;
    z-index: 10;
    margin-top: 54px;
  }

  .role-list {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .role-list-content {
    margin: 30px 30px 0 30px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /*搜索*/
  .role-list-search {
    height: 70px;
    background: linear-gradient(left, #23313c 0%, #1e2f43 50%, #1f304e 100%);
  }

  .role-list-search .search-header {
    height: 60px;
    border-bottom: 1px solid #283f59;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-header > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-search .search-content {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-content > span {
    font-size: 12px;
    padding-left: 18px;
    color: #9b9aad;
  }

  .role-list-search .search-content > input {
    margin-left: 10px;
  }

  .role-list-search .search-content .search-btn > span {
    margin-left: 42px;
  }

  /*表格*/
  .role-list-table {
    margin-top: 20px;
    background: #1b2b44;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .role-list-table .table-title {
    height: 15px;
    background: #1b2b44;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .role-list-table .table-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
</style>

<!--修改框架样式-->
<style>
  .item {
    cursor: pointer;
  }

  .popover-text {
    text-align: center;
    padding-top: 32px;
    font-weight: normal;
  }

  .toastInfo {
    color: #fff;
  }

  .showTooltip {
    opacity: 1;
  }

  /*头部下拉*/
  .employment-detail .top-select-item {
    margin-left: 1.5%;
  }

  .employment-detail .top-select-item .left-select-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .employment-detail .top-select-item.quxiang-select .top-text-wrapper {
    width: 120px;
  }

  .employment-detail .top-select-item.quxiang-select .drop-down-wrapper {
    width: 118px;
  }

  .employment-detail .top-select-item.service-type .top-text-wrapper {
    width: 130px;
  }
  .employment-detail .drop-down-wrapper-double{width:130px;}
  .employment-detail .horizontal-flex{width:130px;  }
</style>
